<template>
  <div class="app-container">
    <search-box :isMulti="false">
      <template slot="content">
        <div class="left-box">
          <el-form-item label="报销人">
            <el-input v-model="listQuery.userName"
                      placeholder="请输入"
                      clearable/>
          </el-form-item>
          <el-form-item label="报销人所属部门">
            <el-input v-model="listQuery.departmentName"
                      placeholder="请输入"
                      clearable/>
          </el-form-item>
          <el-form-item label="报销项目">
            <el-input v-model="listQuery.proName"
                      placeholder="请输入"
                      clearable/>
          </el-form-item>

        </div>
        <div class="right-box">
          <el-button size="mini"
                     @click="handleFilter">查询
          </el-button>
          <el-button size="mini"
                     @click="reset" type="info">重置
          </el-button>
          <el-button size="mini"
                     type="success" @click="handleCreate">新增
          </el-button>
        </div>
      </template>
    </search-box>


    <div class="table-wrap">
      <el-table :data="list"
                style="width:100%"
                element-loading-text="Loading"
                height="600">
        <el-table-column
          type="index"
          width="50"
          label="序号"
        ></el-table-column>

        <el-table-column prop="id"
                         label="ID">
        </el-table-column>

        <el-table-column prop="userName"
                         label="报销人">
        </el-table-column>

        <el-table-column prop="userCode"
                         label="报销人员工号">
        </el-table-column>
        <el-table-column prop="departmentName"
                         label="报销人所属部门">
        </el-table-column>

        <el-table-column prop="money"
                         label="报销总金额">
        </el-table-column>

        <el-table-column prop="code"
                         label="报销编号">
        </el-table-column>

        <el-table-column prop="proName"
                         label="报销项目">
        </el-table-column>

        <el-table-column prop="month"
                         label="报销月份">
        </el-table-column>

        <el-table-column prop="checkMan"
                         label="审批人">
        </el-table-column>


        <el-table-column label="操作" align="center" width="250" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">
              明细
            </el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>

      </el-table>
      <pagination v-show="total>0"
                  :total="total"
                  :page.sync="listQuery.pageNumber"
                  :limit.sync="listQuery.pageSize"
                  @pagination="getList"/>
    </div>


    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="70%"
      style="margin-top: -5%"
    >
      <el-form ref="form" :rules="rules" :model="form" label-width="120px">

        <el-form-item>
          <el-col :span="8">

            <el-form-item label="报销人" prop="userName">
              <el-input v-model="form.userName"></el-input>
            </el-form-item>

          </el-col>
          <el-col :span="8">

            <el-form-item label="报销人员工号" prop="userCode">
              <el-input v-model="form.userCode"></el-input>
            </el-form-item>

          </el-col>
          <el-col :span="8">

            <el-form-item label="报销人所属部门" prop="departmentName">
              <el-input v-model="form.departmentName"></el-input>
            </el-form-item>

          </el-col>
        </el-form-item>

        <el-form-item>
          <el-col :span="12">

            <el-form-item label="报销总金额" prop="money">
              <el-input v-model="form.money"></el-input>
            </el-form-item>

          </el-col>
          <el-col :span="12">

            <el-form-item label="报销编号" prop="code">
              <el-input v-model="form.code"></el-input>
            </el-form-item>

          </el-col>
        </el-form-item>

        <el-form-item>
          <el-col :span="12">

            <el-form-item label="报销项目部门">
              <el-select v-model="form.proDepartment" @change="getProList"
                         placeholder="请选择报销项目部门">
                <el-option v-for="item in departmentList"
                           :key="item.departmentName"
                           :label="item.departmentName"
                           :value="item.departmentName">
                </el-option>
              </el-select>

            </el-form-item>

          </el-col>
          <el-col :span="12">

            <el-form-item label="报销项目名称" prop="proName">
              <el-select v-model="form.proName" filterable placeholder="请选择">
                <el-option
                  v-for="item in proList"
                  :key="item.proCode"
                  :label="item.proName"
                  :value="item.proName">
                </el-option>
              </el-select>
            </el-form-item>

          </el-col>
        </el-form-item>

        <el-form-item>
          <el-col :span="8">

            <el-form-item label="报销月份" prop="month">
              <div class="block">
                <el-date-picker
                  v-model="month"
                  type="month"
                  placeholder="选择月">
                </el-date-picker>
              </div>
            </el-form-item>

          </el-col>
          <el-col :span="8">


            <el-form-item label="审批人部门">

              <el-select v-model="form.departmentName1" @change="getUsersList"
                         placeholder="请选择审批人部门">
                <el-option v-for="item in departmentList"
                           :key="item.departmentName"
                           :label="item.departmentName"
                           :value="item.departmentName">
                </el-option>
              </el-select>

            </el-form-item>

          </el-col>
          <el-col :span="8">

            <el-form-item label="审批人" prop="checkMan">
              <el-select v-model="form.checkMan"
                         placeholder="请选择审批人">
                <el-option v-for="item in usersList"
                           :key="item.userName"
                           :label="item.userName"
                           :value="item.userName">
                </el-option>
              </el-select>

            </el-form-item>
          </el-col>
        </el-form-item>


        <div style="text-align: center">
          <el-table :data="tableReimbursementDetailList" class="kong-box">
            <el-table-column type="index" label="" width="100" align="center"></el-table-column>
            <el-table-column
              prop="date"
              label="日期"
              sortable
              width="100"
              column-key="date"
              :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
              :filter-method="filterHandler"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="reimbursId"
              label="父表id"
              width="70"
              align="center">
              <el-input v-model="form.reimbursId" :disabled="true"></el-input>
            </el-table-column>
            <el-table-column
              prop="userName"
              label="报销人"
              width="70"
              align="center">
              <el-input v-model="form.userName" :disabled="true"></el-input>
            </el-table-column>
            <el-table-column
              prop="userCode"
              label="报销人员工号"
              width="120"
              align="center">
              <el-input v-model="form.userCode" :disabled="true"></el-input>
            </el-table-column>
            <el-table-column
              prop="departmentName"
              label="报销人所属部门"
              width="120"
              align="center">
              <el-input v-model="form.departmentName" :disabled="true"></el-input>
            </el-table-column>
            <el-table-column
              prop="money"
              label="报销明细金额"
              width="120"
              align="center">
              <el-input v-model="form.money"></el-input>
            </el-table-column>
            <el-table-column
              prop="type"
              label="报销类型"
              width="120"
              :filters="type"
              :filter-method="filterTag"
              filter-placement="bottom-end"
              align="center">
              <el-select v-model="form.type"
                         placeholder="请选择">
                <el-option v-for="item in type"
                           :key="item.type"
                           :label="item.type"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-table-column>
            <el-table-column
              prop="typeText"
              label="报销描述"
              width="160"
              align="center">
              <el-input v-model="form.typeText"></el-input>
            </el-table-column>
            <el-table-column
              prop="fileUrl"
              label="报销单据文件地址"
              width="80"
              align="center">
            </el-table-column>
            <el-table-column
              prop="status"
              label="审核状态"
              width="80"
              align="center">
              <el-input v-model="form.status" :disabled="true">
                <template slot-scope="scope">
                  <span v-if="scope.row.status == 1">通过</span>
                  <span v-else-if="scope.row.status == 2">不通过</span>
                  <span v-else-if="scope.row.status == 0">待审批</span>
                </template>
              </el-input>
            </el-table-column>


            <el-table-column label="操作" width="160" align="center">
              <template slot-scope="scope">
<!--                <span class="items" @click="save(scope.row)">提交</span>-->
                <el-button class="items" @click="deleteit(scope.row)">取消</el-button>
              </template>
            </el-table-column>
          </el-table>

          <br><br>

          <el-button
            size="small"
            @click="addData"
          >
            添加明细
          </el-button>
        </div>
        <br><br><br><br>


      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="onSubmit">确 定</el-button>
  </span>
    </el-dialog>


  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import * as apiUser from '@/api/user'
  import * as meetingRoom from '@/api/meeting/meetingRoom'
  import * as reimbursementType from '@/api/finance/reimbursementType'
  import * as reimbursement from '@/api/finance/reimbursement'
  import * as myProject from '@/api/projectOa/myProject'
  import * as department from '@/api/system-setting/department'
  import * as position from '@/api/system-setting/position'
  import * as user from '@/api/system-setting/user'
  import waves from '@/directive/waves' // waves directive
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  // 当然你也可以为了方便使用，将它注册到全局
  import { MessageBox } from 'element-ui'
  import bus from '@/utils/eventBus'
  import searchBox from '@/components/searchBox.vue'

  export default {
    name: 'department',
    components: { Pagination, searchBox },
    directives: { waves },
    filters: {},
    data() {
      return {
        list: null,
        total: 0,
        dialogVisible: false,
        listQuery: { // 查询列表时的参数对象
          pageNumber: 1,
          departmentName: '',
          departmentName1: '',
          departmentCode: '',
          positionName: '',
          roleName: '',
          pageSize: 50,
          name: undefined,
          proPersonLiable: undefined,
          proDepartment: undefined,
          appName: process.env.VUE_APP_APP_NAME,
          tenantIdList: []
        },
        departmentList: [],

        usersList: [],

        proList: [],

        listParent: [],

        tableReimbursementDetailList: [],

        type: [],

        form: {},

        dialogTitle: '',

        month: '',

        rulesList: [
          { label: '管理员', value: '管理员' },
          { label: '言川一级用户', value: '言川一级用户' },
          { label: '言川二级用户', value: '言川二级用户' },
          { label: '言川三级用户', value: '言川三级用户' }

        ],

        rules: {
          meetingCode: [{ required: true, message: '会议室门牌号必填', trigger: 'blur' }],
          meetingName: [{ required: true, message: '会议室名称必填', trigger: 'blur' }],
          meetingAddress: [{ required: true, message: '会议室地址必填', trigger: 'blur' }]

        }
      }
    },
    computed: {
      ...mapGetters([
        'selectedTenantId',
        'tenantList'
      ])
    },
    created() {
      this.getList()
      // this.getRoleList()
      this.getDepartmentList()
      this.getDepartmentList1()
      this.getTypeList()


      // 监听 租户改变的事件,选择不同租户后,立马刷新数据
      bus.$on('selectedTenantIdChanged', () => {
        console.log('selectedTenantIdChanged事件触发...')
        this.getList()
      })

    },
    mounted() {
      // 测试用
      // var that = this
      // setTimeout(function() {
      //   that.dialogFormVisible = true
      // }, 5000)

      // alert(this.$store.getters.selectedTenantId);
    },
    beforeDestroy() { // 当路由切换到其他页面时触发
      bus.$off('selectedTenantIdChanged')
    },
    methods: {
      async getList() { // 获取列表数据
        this.listQuery.tenantIdList = []
        if (this.selectedTenantId == undefined) {//当前选中所有的租户
          this.tenantList.forEach((tenant, index) => {
            this.listQuery.tenantIdList.push(tenant.id)
          })
        } else {
          this.listQuery.tenantIdList.push(this.selectedTenantId)
        }

        //获取后端数据
        const { content } = await reimbursement.getReimbursementInfoList(this.listQuery)
        this.list = content.list
        this.total = content.totalCounts
      },

      async getListParent() { // 获取列表数据
        this.listQuery.tenantIdList = []
        if (this.selectedTenantId == undefined) {//当前选中所有的租户
          this.tenantList.forEach((tenant, index) => {
            this.listQuery.tenantIdList.push(tenant.id)
          })
        } else {
          this.listQuery.tenantIdList.push(this.selectedTenantId)
        }

        //获取后端数据
        const { content } = await myProject.getProjectListParent(this.listQuery)
        this.listParent = content

      },

      async getDepartmentList() { // 获取列表数据

        const { content } = await department.getDepartmentList(this.listQuery)
        this.departmentList = content.list

      },
      async getDepartmentList1() { // 获取列表数据

        const { content } = await department.getDepartmentList(this.listQuery)
        this.departmentList1 = content.list

      },

      async getRoleList() { // 获取列表数据

        const { content } = await department.getRoleList(this.listQuery)
        this.rulesList = content.list

      },
      handleFilter() {
        this.listQuery.pageNumber = 1
        this.getList()
      },

      handleCreate() {
        this.form = {}
        this.dialogVisible = true
        this.dialogTitle = '报销新增'
        this.listQuery = {}
        this.getListParent()
      },
      handleUpdate(row) {
        this.dialogVisible = true
        this.dialogTitle = '报销编辑'
        this.form = row
        this.getListParent()

      },

      handleDelete(row) {
        this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          reimbursement.deleteReimbursementInfo(row.id).then(() => {
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
            this.getList()
          })
        }).catch(() => {
        })

      },

      reset() {
        this.listQuery.meetingCode = ''
        this.listQuery.meetingName = ''
        this.listQuery.meetingAddress = ''
        this.getList()
      },
      cancel() {
        this.listQuery.meetingCode = ''
        this.listQuery.meetingName = ''
        this.listQuery.meetingAddress = ''
        this.dialogVisible = false
        this.getList()
      },
      onSubmit() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.form.tenantId = this.$store.getters.selectedTenantId
            if (this.dialogTitle == '报销新增') {
              reimbursement.createReimbursementInfo(this.form).then((res) => {
                console.log(res)
                if (res.status == 200) {
                  this.$notify({
                    title: '成功',
                    message: '添加成功',
                    type: 'success',
                    duration: 2000
                  })
                  this.listQuery.meetingCode = ''
                  this.listQuery.meetingName = ''
                  this.listQuery.meetingAddress = ''
                  this.listQuery.meetingRoom = ''
                  this.dialogVisible = false
                  this.getList()

                }
              })
            } else if (this.dialogTitle == '报销编辑') {
              reimbursement.updateReimbursementInfo(this.form).then((res) => {
                console.log(res)
                if (res.status == 200) {
                  this.$notify({
                    title: '成功',
                    message: '修改成功',
                    type: 'success',
                    duration: 2000
                  })
                  this.listQuery.meetingCode = ''
                  this.listQuery.meetingName = ''
                  this.listQuery.meetingAddress = ''
                  this.listQuery.meetingRoom = ''
                  this.dialogVisible = false
                  this.getList()

                }
              })
            }

          } else {
            console.log('error submit!!')
            return false
          }
        })

      }
      ,
      async getUsersList() { // 获取列表数据
        this.usersList = []

        const { content } = await user.getUserList(this.form)
        this.usersList = content.list

      },

      async getProList() { // 获取列表数据
        this.proList = []

        const { content } = await myProject.getProjectList(this.form)
        this.proList = content.list

      },

      async getTypeList() { // 获取列表数据
        this.type = []

        const { content } = await reimbursementType.getReimbursementTypeInfoList(this.form)
        this.type = content.list

      },

      addData() {
        // 向表格数组中数据添加一行
        this.tableReimbursementDetailList.push({
          index: this.tableReimbursementDetailList.length,
          // reimbursId: '',
          // describe: '',

        })
      },

      deleteit(row) {
        this.tableReimbursementDetailList.splice(row.index, 1)
      },

    }
  }
</script>

<style scoped>
  .app-select {
    margin-bottom: 20px;
  }
</style>
